<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/13
  Time: 17:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
</head>
<body>
<div class="layui-form" id="searchForm" lay-filter="searchForm">
    <div class="layui-inline">
        <label class="layui-form-label">员工编号:</label>
        <div class="layui-input-inline">
            <input type="text" name="usercode" placeholder="员工编号" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">员工名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="username" placeholder="员工名称" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">员工手机号:</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="员工手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">员工身份证号:</label>
        <div class="layui-input-inline">
            <input type="text" name="cardid" placeholder="员工身份证号" class="layui-input">
        </div>
    </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">请选择角色:</label>
            <div class="layui-input-block">
                <select name="roleid" id="rolesname">
                    <option value="0">请选择角色</option>
                </select>
            </div>
        </div>
    <div class="layui-inline">
        <button class="layui-btn" onclick="search()" >查询</button>
    </div>
    <div class="layui-inline">
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>

<table id="departTable" lay-filter="plotTables"  class="layui-table layui-table-hover"></table>
<%--添加页面--%>
<div id="add" style="display:none;padding:20px">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">员工名称:</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input type="text" name="password" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号:</label>
            <div class="layui-input-block">
                <input type="text" name="cardid" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小区名:</label>
            <div class="layui-input-block">
                <select name="plotid" id="plotname">
                    <option value="">请选择小区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择部门:</label>
            <div class="layui-input-block">
                <select name="departid" id="departname">
                    <option value="0">请选择部门</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择角色:</label>
            <div class="layui-input-block">
                <select name="roleid" id="rolename">
                    <option value="0">请选择角色</option>
                </select>
            </div>
        </div>
    </form>
</div>
<%-- 修改页面--%>
<div id="update" style="display:none;padding:20px">
    <form class="layui-form" id="updateForm" lay-filter="updateForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">员工名称:</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份证号:</label>
            <div class="layui-input-block">
                <input type="text" name="cardid" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">小区名:</label>
            <div class="layui-input-block">
                <select name="plotid" id="plotnames">
                    <option value="">请选择小区</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择部门:</label>
            <div class="layui-input-block">
                <select name="departid" id="departnames">
                    <option value="0">请选择部门</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请选择角色:</label>
            <div class="layui-input-block">
                <select name="roleid" id="rolenames">
                    <option value="0">请选择角色</option>
                </select>
            </div>
        </div>
    </form>
</div>
</div>
<%--头部工具栏，添加--%>
<script type="text/html" id="headTool">
    {{#  if(${sessionScope.loginUser.roleid}==1){ }}<!--layui 规定 用 d 来表示数据实体 laytpl-->
    <button class="layui-btn" onclick="add()">添加员工</button>
    {{#  } }}
</script>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
    </div>
</script>
</body>
<script>
    let $=layui.$
    $.get("/property/plot/show")
        .then(({data})=>{
            console.log(data);
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.plotname+"</option>");
                $("[name=plotid]").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });
    $.get("/sys/findall")
        .then(({data})=>{
            console.log(data);
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.rolename+"</option>");
                $("[name=roleid]").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });
    $.get("/sys/departmentall")
        .then(({data})=>{
            console.log(data);
            //data:数组
            $(data).each(function (i,e){
                let option = $("<option value='"+e.id+"'>"+e.departname+"</option>");
                $("[name=departid]").append(option);
            });
            //重新渲染下拉列表
            layui.form.render('select');
        });
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#departTable",
            url:"/teammanager/user/show",
            toolbar: "#headTool",
            page:true,
            cols:[[
                {field:'number',align: 'center',type:'numbers',title:"编号"},
                {field:'id',align: 'center',hide:true,title:"序号"},
                {field:'usercode',align: 'center',title:"员工编号"},
                {field:'username',align: 'center',title:"员工名"},
                {field:'phone',align: 'center',title:"电话"},
                {field:'cardid',align: 'center',title:"身份证"},
                {field:'email',align: 'center',title:"邮箱"},
                {field:'createtime',align: 'center',title:"创建时间"},
                {field:'imgs',align: 'center',title:"头像",templet(d) {
                    return  d.img==null?"-":"<img src='/"+d.imgs+"' width='50px'/>";
                    }},
                {field:'roleid',align: 'center',title:"角色",templet(r){
                    return r.role.rolename;
                    }},
                {align: 'center',title:"操作",toolbar: '#barDemo'},
            ]]
        })
        table.on("tool(plotTables)",function (obj){
           if(obj.event == "update"){
                updates(obj);
            }
        })
    })
    //点击去查询
    function search(){
        //获取表单的值,表单序列化
        var where = layui.form.val('searchForm');
        console.log(where)
        //条件查询，重载表格因为键和值都是where，所以可以值保留键
        layui.table.reload('one',{
            page: {
                curr:1
            },
            where:where
        });
    }
    //点击添加
    function add(){
        layui.layer.open({
            type : 1,
            title : "提示",
            area:["500px","500px"],
            content: $("#add"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let addForm = layui.form.val("addForm");
                console.log(addForm);
                //发送ajax请求
                $.post("/teammanager/user/add",addForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }
    //点击修改
    function updates(obj){
        console.log(obj.data);
        //先赋值
        layui.form.val('updateForm', obj.data);
        $("[name=roleid]").val(obj.data.role.id);
        //渲染
        layui.form.render("select");
        //弹窗
        layui.layer.open({
            type : 1,
            title : "修改楼栋",
            area:["500px","500px"],
            content: $("#update"),
            icon : 3,
            btn:["确定","取消"],
            yes(){
                //通过表单序列化，获取输入的内容
                let updateForm = layui.form.val("updateForm");
                console.log(updateForm);
                //发送ajax请求
                $.post("/teammanager/user/update",updateForm)
                    .then(({msg})=>{
                        //关闭弹出层
                        layui.layer.close(layui.layer.index);
                        //弹出消息提示框
                        layui.layer.msg(msg);
                        //刷新表格
                        layui.table.reload('one');
                    });
            }
        });
    }
</script>
</html>
